<template>
  <div>
    <div class="mb-10">
      <div class="color-red">
        1.若退库状态为退库申请中，请等待仓储完成退库。
      </div>
      <div class="color-red">
        2.若退库状态为退库类型错误，请在综合查询-项目操作按钮-物资退库详情页进行调整。
      </div>
    </div>
    <el-row>
      <el-col :span="12" style="min-width: 680px">
        <wz-table
          :columns="wzApplicationColumn"
          :use-index="true"
          :table-data="designData"
        >
          <template #header="{ col }">
            <div class="header-wrapper">
              {{ col.label }}
            </div>
          </template>
          <template #ifSourceCode="{ row }">
            <div>
              {{ ifSourceCode(row.ifSourceCode) }}
            </div>
          </template>
        </wz-table>
      </el-col>
      <el-col :span="12" style="max-width: calc(100% - 680px)">
        <wz-table
          :columns="wzApplicationColumnRight"
          :table-data="designData"
        >
          <template #header="{ col }">
            <div v-if="col.details" class="header-wrapper">
              <el-tooltip
                class="item"
                effect="dark"
                :content="col.details"
                placement="top-start"
              >
                <span> {{ col.label }}</span>
              </el-tooltip>
            </div>
            <div v-else class="header-wrapper">
              {{ col.label }}
            </div>
          </template>

          <!-- 本次申领数量 -->
          <template #applyNum="{ row }">
            <el-input
              v-model="row.applyNum"
              :disabled="nonarrivalDisabled(row)"
              class="pms-wz-input el-table-inline"
            />
          </template>
          <template #operation="{ row }">
            <span v-if="+row.pmsRetreat===37" />
            <el-button
              v-else-if="(+row.retreatState===0||+row.retreatState===3)&&+row.isPush===1&&(+row.pmsRetreat === 31||+row.retreatState === 3)&&isEdit"
              class="pms-button-primary mr-5"
              @click="handleMaterialRemoveFormVisible(row)"
            >撤销退库</el-button>
            <span v-else-if="(+row.retreatState===0||+row.retreatState===3)&&+row.isPush===1&&!(+row.pmsRetreat === 31||+row.retreatState === 3)">不可撤销退库</span>

            <el-button
              v-if="(+row.retreatState === 3 || +row.retreatState === 1 )&& +row.pmsRetreat!==37"
              class="pms-button-primary"
              @click="handleMaterialType(row)"
            >退库类型修改</el-button>
          </template>
          <template #ifASourceCode="{ row }">
            <div v-if="reTryOperate(row) === 1">
                <el-button
                    v-if="isEdit"
                    class="pms-button-primary"
                    @click="reTryOperateBtn(row,'1')"
                >
                    重试退库
                </el-button>
            </div>
            <div v-else-if="reTryOperate(row) === 2">
              <el-button
                v-if="isEdit"
                class="pms-button-primary"
                @click="reTryOperateBtn(row,'2')"
              >
                重试退库
              </el-button>
            </div>
            <div v-else />
          </template>
        </wz-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const REMOVE_MATERIAL_APPLICATION_LIST_LEFT = [
    {
        label: '站址编码',
        prop: 'siteId',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '主设备标识',
        prop: 'spuMainName',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '源头赋码标识',
        prop: 'ifSourceName',
        elProps: {
            width: '180px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库数量',
        prop: 'retreatAmount',
        elProps: {
            width: '80px',
            'show-overflow-tooltip': true
        }
    }
]
const REMOVE_MATERIAL_APPLICATION_LIST_RIGHT = [
    {
        label: '退库状态',
        prop: 'retreatStateName',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '操作',
        prop: 'operation',
        elProps: {
            'min-width': '280px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '推送仓储状态',
        prop: 'pushName',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库申请单号',
        prop: 'retreatDetailId',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库类型',
        prop: 'refundType',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库类别',
        prop: 'pmsRetreatType',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '规格型号',
        prop: 'formPattern',
        elProps: {
            width: '80px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '商品编码',
        prop: 'materialCode',
        elProps: {
            width: '80px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '商品名称',
        prop: 'materialName',
        elProps: {
            width: '80px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库申请时间',
        prop: 'createTime',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库完成时间',
        prop: 'retreatTime',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '仓储返回信息',
        prop: 'backMsg',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '自定义规格',
        prop: 'dwjl',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '计量单位',
        prop: 'unit',
        elProps: {
            width: '80px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '不含税单价',
        prop: 'price',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '含税总金额',
        prop: 'totalTaxAmount',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '备注',
        prop: 'remark',
        elProps: {
          width: '120px',
          'show-overflow-tooltip': true
        }
    },
    {
        label: '失败重推',
        prop: 'ifASourceCode',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    }
]
// 系统常量配置
import wzTable from './cTable'
import {
    retreatQueryRetreatEquipList,
    cancelRetreatApply,
    queryRetreatEquipListWhole, updateRetreatInfoById, sendMaterialTransferInfo
} from '@/api/material'
export default {
    name: 'CancelRetreatApplyTable',
    components: { wzTable },
    props: {
        currentRow: {
            type: Object,
            default: () => ({})
        },
        projectInfo: {
            type: Object,
            default: () => ({})
        },
        isEdit: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            fileList: [],
            receiveDetailsData: {},
            designData: [],
            materialRemovalVisible: false,
            materialBackVisible: false,
            arrivalVisible: false,
            planGetTime: '',

            nonarrivalNumForm: {
                nonarrivalNum: ''
            },
            materialsRemarks: '',
            form: {
                categoryCode: '',
                categoryName: '',
                applySno: '',
                orderId: ''
            },
            materialRemoveFormVisible: false,
            updateRow: {},
            wzApplicationColumnRight: [],
            wzApplicationColumn: []
        }
    },
    computed: {
        query() {
            return this.$route.query
        },
        reTryOperate() {
            return (row) => {
                if (
                    +row.isPush !== 1 &&
                    +row.pmsRetreat === 37 &&
                    +row.retreatState === 0
                ) {
                    return 1
                }
                if (
                    +row.isPush === 2 &&
                    +row.pmsRetreat !== 37 &&
                    +row.retreatState === 0
                ) {
                    return 2
                }
                return 3
            }
        }
    },
    watch: {
        materialRemoveFormVisible(value) {
            this.$emit('switch', !value, this.updateRow)
        }
    },
    created() {
        this.wzApplicationColumn = JSON.parse(
            JSON.stringify(REMOVE_MATERIAL_APPLICATION_LIST_LEFT)
        )
        this.wzApplicationColumnRight = JSON.parse(
            JSON.stringify(REMOVE_MATERIAL_APPLICATION_LIST_RIGHT)
        )
        console.log(1111,this.projectInfo)
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        ifSourceCode(ifSourceCode) {
            if (+ifSourceCode) {
                return '否'
            }
            if (ifSourceCode === 0 || ifSourceCode === '0') {
                return '是'
            }
            return ''
        },
        async getTableData() {
            this.designData = []
            if (this.query.manageMode === '03' || this.query.manageMode === '04') {
                const res = await queryRetreatEquipListWhole({
                    osDetailId: this.currentRow.osDetailId
                })
                if (+res.code === 200) {
                    this.designData = res.data
                }
            } else {
                const res = await retreatQueryRetreatEquipList({
                    bundingId: this.currentRow.bundingId
                })
                if (+res.code === 200) {
                    this.designData = res.data
                }
            }
        },
        async reTryOperateBtn(row,type) {
            const loading = this.$loading({
                lock: true,
                text: '正在重推仓储申领单，请稍后...',
                spinner: 'el-icon-loading',
                fullscreen: false
            })
            try {
                let res={}
                if(type === '1'){
                    //调新接口
                    res = await sendMaterialTransferInfo({
                        retreatDetailId: row.retreatDetailId,
                        recipientApplyId:"",
                    })
                }else{
                    res = await updateRetreatInfoById({
                        retreatDetailId: row.retreatDetailId
                    })
                }
                if (+res.code === 200) {
                    this.$message.success('提交成功!')
                    await this.getTableData()
                    this.$emit('removeMaterial')
                }
            } catch (error) {
                console.log(error)
            } finally {
                loading.close()
            }
        },
        nonarrivalDisabled(row) {
            if (+row.noReceiveAmount) {
                return false
            }
            return true
        },

        // 点击出库数量
        handleMaterialsDetail() {
            this.materialRemovalVisible = true
        },
        // 退库数量
        handleMaterialBackVisible() {
            this.materialBackVisible = true
        },
        // 已贴标签数量
        handleArrivalVisible() {
            this.arrivalVisible = true
        },
        // 取消退库
        async handleMaterialRemoveFormVisible(row) {
            const params = {
                retreatDetailId: row.retreatDetailId
            }
            const loading = this.$loading({
                lock: true,
                text: '撤销退库,请稍后...',
                spinner: 'el-icon-loading'
            })
            try {
                const res = await cancelRetreatApply(params)
                if (+res.code === 200) {
                    this.$message.success('操作成功')
                    await this.getTableData()
                    this.$emit('removeMaterial')
                    loading.close()
                }
            } catch (error) {
                loading.close()
            } finally {
                loading.close()
            }
        },
        handleMaterialType(row) {
            this.updateRow = row
            this.materialRemoveFormVisible = true
        }
    }
}
</script>
<style scoped lang="scss">
.el-table th {
    padding: 0px 0;
    text-align: center;
    font-size: 12px;
    color: #333333;
    letter-spacing: 0;
}
.el-table td {
    padding: 0px 0;
    text-align: center;
    font-size: 2px;
    color: #333333;
    letter-spacing: 0;
}
.click-row {
    color: #53c7f8;
    cursor: pointer;
}
.color-red {
    color: #eb4b4b;
}
.materials-remark-wrapper {
    position: relative;
    border: 1px solid #ccc;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    &-title {
        position: absolute;
        left: 50%;
        top: -13px;
        background: #fff;
        font-weight: bold;
    }
}
.mt-10 {
    margin-top: 10px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mr-5 {
    margin-right: 5px !important;
}
.flex-box {
    display: flex;
    width: 100%;
    align-items: center;

    &-left {
        margin-right: auto;
    }
}
.pms-el-datepicker {
    margin-left: 10px;
    margin-right: 10px;
    height: 24px;
    ::v-deep .el-input__inner {
        height: 24px;
    }
    ::v-deep .el-input__icon {
        line-height: 20px;
    }
}
.pb-5 {
    padding-bottom: 5px;
}
.header-wrapper {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flex-layout{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
</style>
